<template>
  <view class="nav-bg">
    <view class="nav-header">
      <view class="nav-title">
        <icon-font name="th-large" class="nav-title-icon" />
        页面跳转导航
      </view>
    </view>
    <view class="nav-content">
      <view class="nav-btn-card" v-for="btn in btns" :key="btn.path" @click="go(btn.path)">
        <view class="nav-btn-label">{{ btn.label }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";

const nameMap = {
  "user-registration-platform-account": "认证页面",
  "factory-recruitment": "工厂招聘",
  "mobile-recruitment-platform": "移动招聘",
  "special-recruitment": "特殊招聘",
  "post-job-openings": "招聘发布",
  "order-acceptance-records": "接单记录",
  "order-acceptance-square": "接单广场",
  "platform-task-publish": "任务发布",
  "post-reward-task-task-platform": "悬赏任务",
  "reward-hall": "悬赏大厅",
  "task-details-reward-task-platform": "任务详情",
  "promotion-reward-settlement-system-secondary-distribution": "推广结算",
  "promotion-statistics-center": "推广统计",
  "endless-learning-professional-online-learning-platform": "在线学习",
  "merchant-entrance-platform": "商家入驻",
  "my-page": "我的页面",
  login: "登录",
  "contact-us": "联系我们",
  "application-record": "应聘记录",
};

const btns = [
  "endless-learning-professional-online-learning-platform",
  "contact-us",
  "merchant-entrance-platform",
  "post-reward-task-task-platform",
  "user-registration-platform-account",
  "application-record",
  "factory-recruitment",
  "platform-task-publish",
  "special-recruitment",
  "login",
  "task-details-reward-task-platform",
  "reward-hall",
  "order-acceptance-records",
  "order-acceptance-square",
  "promotion-reward-settlement-system-secondary-distribution",
  "promotion-statistics-center",
  "mobile-recruitment-platform",
  "my-page",
  "post-job-openings",
  "post-job",
].map((name) => ({
  label: nameMap[name] || name,
  path: `/pages/webs/${name}`,
}));

const go = (path) => {
  Taro.navigateTo({ url: path });
};
</script>

<style scoped>
.nav-bg {
  min-height: 100vh;
  background: linear-gradient(180deg, #2196f3 0%, #21cbf3 100%);
  padding-bottom: 60rpx;
}

.nav-header {
  width: 100%;
  padding-top: 60rpx;
  padding-bottom: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #fff;
  display: flex;
  align-items: center;
  letter-spacing: 2rpx;
  text-shadow: 0 4rpx 16rpx rgba(33, 150, 243, 0.18);
}

.nav-title-icon {
  font-size: 38rpx;
  margin-right: 16rpx;
  color: #fff;
}

.nav-content {
  margin: 0 auto;
  margin-top: -40rpx;
  max-width: 800rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 28rpx;
  justify-content: center;
  padding: 30rpx 10rpx 0 10rpx;
}

.nav-btn-card {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 6rpx 24rpx rgba(33, 150, 243, 0.1);
  min-width: 200rpx;
  min-height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 36rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #2196f3;
  cursor: pointer;
  transition: box-shadow 0.18s, transform 0.18s, background 0.18s, color 0.18s;
  position: relative;
  overflow: hidden;
  border: none;
}

.nav-btn-card:active {
  background: linear-gradient(90deg, #21cbf3 0%, #2196f3 100%);
  color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(33, 150, 243, 0.1);
  transform: scale(0.97);
}

.nav-btn-label {
  z-index: 1;
  text-align: center;
  width: 100%;
}

@media (max-width: 750px) {
  .nav-content {
    gap: 16rpx;
    padding: 20rpx 2rpx 0 2rpx;
  }
  .nav-btn-card {
    min-width: 120rpx;
    font-size: 24rpx;
    padding: 0 10rpx;
    min-height: 60rpx;
  }
  .nav-title {
    font-size: 28rpx;
  }
}
</style>
